<template>
	<view class="safe-area-inset-bottom">
		<view class="container_header">
			<span>管理拥有当前角色的员工</span>
			<view v-if="form.isSystem == 0">
				<view class="role_btn" v-show="showDelete">
					<span @click="deleteBy">批量删除</span>
					<span style="margin-left: 20rpx;" @click="addMember">添加成员</span>
				</view>
			</view>
		</view>
		<view v-if="personList != ''">
			<uni-card :is-shadow="false" v-for="(item,index) in personList" :key="index">
				<view class="flex_between">
					<p class="grid-integral">员工姓名：{{ item.name }}</p>
					<!--   -->
						<checkbox-group v-if="form.isSystem == 0">
							<label>
								<checkbox value="item.id" :checked="false" color="#00a660" style="transform:scale(0.7)"
									@click="batchDeletion(item)" />
							</label>
						</checkbox-group>
					</view>
					<p class="grid-integral">员工账号：{{ item.mobile }}</p>
					<p class="grid-integral">账号状态：
						<template v-for="(dictItem, index) in dicts.ec_sys_status">
							<template v-if="item.status == dictItem.value">
								<uni-tag :text="dictItem.text" :type="dictItem.type" />
							</template>
						</template>
					</p>
					<p class="grid-integral">所属部门：{{item.deptName}}</p>
					<p class="grid-integral">认证状态：
						<template v-for="(dictItem, index) in dicts.ec_certify_status">
							<template v-if="item.isCertify == dictItem.value">
								<uni-tag :text="dictItem.text" :type="dictItem.type" />
							</template>
						</template>
					</p>
					<view slot="actions" class="card-actions" v-if="$store.getters.companyInfo.adminId != item.id && $store.getters.companyInfo.legalPersonId != item.id">
					  <view class="card-actions-item" @click="handledelete(item)">
					    <text class="card-actions-item-text errorColor">移除成员</text>
					  </view>
					  </view>
			</uni-card>
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" textColor="#00a660" v-else />
	</view>
</template>

<script>
	import {getDictsByNameForUni} from "@/utils/dicts";
	import {uniqueArr} from "@/utils";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	import {listPersonByRoleId,removePerson} from "@/api/ec/console/org/companyRole";
	export default {
		components: {luanqingEmpty},
		data() {
			return {
				// 数据字典
				dicts: {
					ec_certify_status: [],
					ec_sys_status: [],
				},
				personList: [], //成员列表
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					id: null,
				},
				form: '',
				showDelete: false,
				ids: [], //批量删除的id
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.role);
			this.getList()
			this.getDicts()
		},
		methods: {
			// 批量删除
			deleteBy(){
				
			},
			/**加载数据字典*/
			getDicts() {
				this.dicts.ec_certify_status = getDictsByNameForUni("ec_certify_status");
				this.dicts.ec_sys_status = getDictsByNameForUni("ec_sys_status")
			},
			/** 移除成员 */
			handledelete(item) {
				let that = this
				let ids;
				if (null == item.id) {
					ids = this.ids;
				} else {
					ids = item.id
				}
				uni.showModal({
					title: '系统提示',
					content: '确定移除成员？',
					confirmColor: '#00a660',
					cancelText: '取消',
					confirmText: '确定删除',
					success: function(res) {
						if (res.confirm) {
							let data = {
								roleId: that.form.id,
								staffIdList: ids
							}
							removePerson(data);
							that.getList()
							that.$modal.msgSuccess("移除成功");
						}
					}
				})
			},
			/** 批量删除 */
			batchDeletion(item) {
				this.showDelete = true
				// 是否包含当前选中的id
				var num = this.ids.indexOf(item.id);
				if (num > -1) {
					this.ids.splice(num, 1);
				} else {
					this.ids.push(item.id);
				}
				if (this.ids.length == 0) {
					this.showDelete = !this.showDelete
				}
			},
			/** 添加成员 */
			addMember() {
				uni.navigateTo({
					url: '/pages/mine/work/organizationalManagement/personnelManage/newMember'
				})
			},
			getList() {
        this.$modal.loading();
				this.queryParams.id = this.form.id;
				listPersonByRoleId(this.queryParams).then(response => {
					uni.hideLoading()
					this.personList = response.rows;
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-checkbox-input {
		border: 1rpx solid $uni-color-primary;
	}

	.container_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 20rpx;
		background-color: #d4f6dc;
	}

	.role_btn {
		span {
			padding: 8rpx 22rpx;
			background: #fff;
			borde: 1rpx solid #000;
			border-radius: 10rpx;
		}
	}
</style>
